<!-- 机构端-我的-报名记录 -->
<template>
	<view class="recruitment-container">
		<!-- 顶部标签栏 -->
		<u-tabs :list="tabs" :current="currentTab" @change="tabChange" active-color="#2979ff" inactive-color="#666"
			bar-width="120" :bold="true" :font-size="32" bg-color="#F1F7F7"></u-tabs>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 招聘列表 -->
			<view v-if="jobList.length > 0">
				<view v-for="(job, index) in filteredJobs" :key="index" class="job-card" @click="recordDetails">					
					<view class="job-header">
						<text class="job-title">{{ job.createTime }}</text>
						<text class="job-salary">{{ job.statusText }}</text>
					</view>
					
					<view class="card-top">
						<!--左边证书图片 -->
						<view class="card-left">							
							<view class="job-image">
								<u-image width="60px" height="80px" :src="job.image"></u-image>
							</view>						
						</view>
						<!-- 右边文字 -->
						<view class="card-right">							
							<view class="job-info">
								<text class="job-item">{{ job.title }}</text>
							</view>							
							<view class="job-info">
								<text class="info-item">报名人数：{{ job.number }}</text>
								<text class="info-item">人</text>
							</view>							
							<view class="job-meta">
								<text>订单金额：{{ job.salary }}</text>
							</view>
						</view>			
					</view>				
					<view class="job-actions">
						<template v-if="job.status === 'SigningUp'">
							<u-button type="default" size="mini" plain @click="deleteJob(job.id)" :custom-style="customStyleObject" shape="circle">
								复制报名链接
							</u-button>
							<u-button type="default" size="mini" plain @click="publishJob(job.id)" :custom-style="customStyleObject" shape="circle">
								取消报名
							</u-button>
							<u-button type="default" size="mini" plain @click="editJob(job.id)" :custom-style="customStyleObject" shape="circle">
								提交审核
							</u-button>
							<u-button type="default" size="mini" plain @click="recordDetails(job.id)" :custom-style="customStyleObject" shape="circle">
								详情
							</u-button>
						</template>
						<template v-else-if="job.status === 'unpaid'">
							<u-button type="default" size="mini" plain @click="deleteJob(job.id)" :custom-style="customStyleObject" shape="circle">
								去支付
							</u-button>
							<u-button type="default" size="mini" plain @click="publishJob(job.id)" :custom-style="customStyleObject" shape="circle">
								取消报名
							</u-button>
							<u-button type="default" size="mini" plain @click="recordDetails(job.id)" :custom-style="customStyleObject" shape="circle">
								详情
							</u-button>
						</template>
						<template v-else>
							<u-button type="default" size="mini" plain @click="recordDetails(job.id)" :custom-style="customStyleObject" shape="circle">
								详情
							</u-button>
						</template>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
				margin-top="100"></u-empty>
		</view>

		<!-- 发布按钮 -->
		<!-- 		<view class="publish-btn">
			<u-button type="primary" shape="circle" @click="createJob">
				发布新岗位
			</u-button>
		</view> -->

	</view>
</template>

<script>
	import DialNav from '@/components/nav/dial-nav.vue';
	export default {
		components: {
			DialNav
		},
		data() {
			return {
				currentTab: 1, // 默认选中"我的招聘"
				// tabs页
				currentTab: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '报名中'
					},
					{
						name: '审核中'
					},
					{
						name: '报名成功'
					}
				],
				// 报名中：SigningUp， 待支付：unpaid， 已支付：paid ，报名成功:  registSuccess
				jobList: [{
						id: 1,
						title: '培训考试',
						salary: '5000.00',
						number: '32',
						image: '/static/nav/nav-classify.png',
						createTime: '2025-05-23',
						status: 'SigningUp',
						statusText: '报名中'
					},
					{
						id: 2,
						title: '考评',
						salary: '3200.00',
						number: '15',
						image: '/static/nav/nav-classify.png',
						createTime: '2025-05-23',
						status: 'unpaid',
						statusText: '审核中-待支付'
					}
				],
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					color:'#03B8CD',
					fontSize:'28rpx'
					// margin-right: 20rpx;

				},
			}
		},
		computed: {
			// 按条件过滤是否发布的条件
			filteredJobs() {
				if (this.currentTab === 1) {
					return this.jobList.filter(job => job.status === 'SigningUp');
				} else if (this.currentTab === 2) {
					return this.jobList.filter(job => job.status === 'unpaid');
				}
				return this.jobList;
			}
		},
		methods: {
			tabChange(index) {
				this.currentTab = index;
			},
			createJob() {
				uni.navigateTo({
					url: '/pages/recruitment/create'
				});
			},
			// 带参数的页面跳转
			editJob(id) {
				uni.navigateTo({
					url: `/pages/recruitment/edit?id=${id}`
				});
			},
			// 跳转到报名详情页面
			recordDetails(id){
				// console.log('查看详情',id)
				uni.navigateTo({
					url: `/pages/Institution/record/details?id=${id}`
				});
			},
			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			publishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'published';
					job.statusText = '已发布';
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
				}
			},
			unpublishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'draft';
					job.statusText = '未发布';
					uni.showToast({
						title: '已下架',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F1F7F7;

		/deep/ .u-tabs {
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			border-radius: 12rpx;
		}

		.content {
			// flex: 1;
			overflow-y: auto;
			margin: 10px;
			// padding: 10rpx;

			.job-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				
				.job-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				
					.job-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
				
					.job-salary {
						font-size: 28rpx;
						color: #ff6a00;
						font-weight: bold;
					}
				}
				
				.card-top {				
					display: flex;
					border-bottom: 1px solid #dfdfdf;
					margin-bottom: 20px;
				}

        .card-left {
					width: 60px;
					height: 80px;
					margin-right: 20px;
				}


				.job-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #666;

					.info-item {
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.job-meta {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 30rpx;
					// border-bottom: 1px solid #dfdfdf;
					padding-bottom: 15rpx;

					.status {
						font-weight: bold;

						&.status-published {
							color: #19be6b;
						}

						&.status-draft {
							color: #ff9900;
						}
					}
				}

				.job-actions {
					display: flex;
					justify-content: flex-end;
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
		}
	}
</style>